import { ScrollView, Text ,View, StyleSheet, TextInput, Button} from 'react-native';
import { PieChart } from 'react-native-gifted-charts';
import { TestCase, Tester } from "@rnoh/testerino";
import { useState } from 'react';

const pieData = [{ value: 50 }, { value: 20 }, { value: 40 }];

export default function () {

  // 圆环图属性
  const donutChartprops = [
    { inwardExtraLengthForFocused: 10, focusOnPress: true, donut: true, },
    { inwardExtraLengthForFocused: 98, focusOnPress: true, donut: true, },
    { donut: true, semiCircle: true },
    { innerRadius: 10, donut: true },
    { innerRadius: 30, donut: true },
    { innerCircleColor: 'red', donut: true },
    { innerCircleColor: 'blue', donut: true },
    { innerCircleBorderWidth: 5, donut: true },
    { innerCircleBorderWidth: 10, donut: true },
    { innerCircleBorderColor: 'red', donut: true },
    { innerCircleBorderColor: 'blue', donut: true },
    { shiftInnerCenterX: -10, donut: true, isThreeD: true },
    { shiftInnerCenterX: 30, donut: true, isThreeD: true },
    { shiftInnerCenterY: -10, donut: true, isThreeD: true },
    { shiftInnerCenterY: 30, donut: true, isThreeD: true },
  ]

  const [selectedIndex, setSelectedIndex] = useState(null)
  const [searchValue, setSearchValue] = useState('')
  const [layoutList, setLayoutList] = useState(donutChartprops)

  const handleSearch = (value) => {
    const index = donutChartprops.findIndex(item => JSON.stringify(item).includes(value))
    setSelectedIndex(null)
    if(index !== -1) {
      setLayoutList(donutChartprops.filter(item => JSON.stringify(item).includes(value)))
    } else {
      alert('未找到匹配的图表')
      setLayoutList(donutChartprops)
    }
  }

  return (
    <Tester>
      <View style={styles.serachContainer}>
        <TextInput 
          style={styles.searchInput}
          placeholder='筛选图表属性'
          value={searchValue}
          onChangeText={setSearchValue}
          onSubmitEditing={() => handleSearch(searchValue.replaceAll(`"`,`'`))}
        />
      </View>
      <ScrollView >
        {
          layoutList.map((item, index) => {
            return (
              <TestCase itShould={JSON.stringify(item)} tags={['C_API']}>
                {item.inwardExtraLengthForFocused ? <Text>inwardExtraLengthForFocused:{item.inwardExtraLengthForFocused},请点击圆环图子项，观察选中子项放大后扇形的圆角。</Text> : null}
                {selectedIndex === index?
                  <PieChart data={pieData} {...item}></PieChart>
                  : (<Button title='点击显示图表' onPress={() => setSelectedIndex(index)} />)
                }
              </TestCase>
            )
          })
        }
        <View style={{height:100}}></View>
      </ScrollView>
    </Tester>
  )
}

const styles = StyleSheet.create({
  serachContainer: {
    padding: 10,
    backgroundColor: '#f5f5f5'
  },
  searchInput: {
    height: 40,
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 5,
    paddingHorizontal: 10
  }
})